<template>
  <view>
    <view class="content">
      <view class="title">CBD|W酒店紫艷中餐厅丨新派粤菜</view>
      <view class="yd-flex-h-hL-vD">
        <view>小小管理员</view>
        <view class="date">2023-02-27 18:50</view>
      </view>
      <view class="editor">
        <view style="text-index: 2em">走进位于广州W酒店的紫艳中餐厅在餐厅玄关处可通过半通透的麦穗组成的屏风看到餐厅大厅环境内部装饰以暖色、粉色为主天花板上幻彩色调的玻璃灯罩与五羊传说的彩云影像呼应</view>
        <image style="width: 100%;margin: 12rpx 0" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ce3051d7ee6947049b1f216ced22506b~tplv-k3u1fbpfcp-zoom-crop-mark:1512:1512:1512:851.awebp?"/>
        <view style="text-index: 2em">广州W酒店中餐行政总厨餐厅林瑜人通过融合经典粤菜烹饪文化和现代烹饪技术打造精致创意的中式料理创造性地推出多款新派粤菜征服了无数嘴刁的老饕若想品尝高档味美的新派粤菜，切身体验“五羊传说”的神秘色彩，感受视觉与味觉的双重享受！！</view>
      </view>
    </view>
    <view class="comment">
      <view class="comment__title">社区留言 （3）</view>
      <view class="comment__item">
        <image class="item__avatar" src="https://p3-passport.byteimg.com/img/user-avatar/cc731dba80504fe6921a741bdb0d1cd7~100x100.awebp"/>
        <view class="item__info">
          <view class="item__name">我是一只小鸟</view>
          <view class="item__content">我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</view>
          <view>2023-03-01 21:04</view>
        </view>
      </view>
      <view class="comment__item">
        <image class="item__avatar" src="https://p3-passport.byteimg.com/img/user-avatar/7222a8c2afeff4b583005ebbc97dcb0c~100x100.awebp"/>
        <view class="item__info">
          <view class="item__name">橙某人</view>
          <view class="item__content">我是内容我是内容我是内容我是内容我是内容我是内容</view>
          <view>2023-03-02 16:04</view>
        </view>
      </view>
      <view class="comment__item">
        <image class="item__avatar" src="https://p3-passport.byteimg.com/img/user-avatar/3cb9208e1e6419a3c2cc8821935bf2a9~100x100.awebp"/>
        <view class="item__info">
          <view class="item__name">蓝天白云</view>
          <view class="item__content">我是内容我是内容我内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</view>
          <view>2023-03-03 16:04</view>
        </view>
      </view>
    </view>
    <view class="fixed-nav">
      <input placeholder="请留言…" />
      <text>评论</text>
    </view>
  </view>
</template>

<script>
export default {

}
</script>

<style lang="scss">
.content {
  background-color: #fff;
  box-sizing: border-box;
  padding: 32rpx 28rpx 48rpx 32rpx;
  font-size: 28rpx;
  color: #333;
}
.title {
  font-size: 40rpx;
  color: #333;
  margin-bottom: 20rpx;
}
.date {
  margin-left: 20rpx;
  color: #666;
}
.editor {
  margin-top: 40rpx;
  width: 100%;
}
.comment {
  box-sizing: border-box;
  padding: 32rpx 0 120rpx 28rpx;
}
.comment__title {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 32rpx;
}
.comment__item {
  display: flex;
  color: #666;
  font-size: 24rpx;
  margin-bottom: 28rpx;
}
.item__avatar {
  width: 76rpx;
  height: 76rpx;
  border-radius: 6rpx;
  margin-right: 20rpx;
}
.item__info {
  flex: 1;
  border-bottom: 2rpx solid #E4E4E4;
  box-sizing: border-box;
  padding: 0 0 32rpx 0;
}
.comment__item:last-child .item__info {
  border-bottom: none;
}
.item__name {
  color: #666;
  font-size: 28rpx;
  margin-bottom: 8rpx;
}
.item__content {
  margin-bottom: 20rpx;
  color: #333;
  font-size: 30rpx;
}
.fixed-nav {
  width: 94%;
  height: 96rpx;
  border-radius: 22rpx;
  background-color: #fff;
  overflow: hidden;
  position: fixed;
  bottom: 4%;
  left: 3%;
  box-shadow: 0 6rpx 24rpx 2rpx rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  color: #333;
  font-size: 28rpx;
  box-sizing: border-box;
  padding: 0 28rpx;
  input {
    flex: 1;
    margin-right: 24rpx;
  }
}
</style>
